<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>宣和艺网-共享艺术服务平台</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}"/>
    <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
    <script type="text/javascript" th:src="@{/js/baiduhm.js}"></script>

</head>

<body>
<!--手机搜索begin-->
<div id="nav-search">

</div>
<div class="drawer-section search_div">
    <div class="search_con">
        <form action="" style="width: 100%;height: 100%;">
            <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>
            <input type="submit" value="" class="bnt1"/>
        </form>
    </div>
</div>
<div class="drawer-section-name search_div" style="padding-bottom: 11%;">
    <div class="search_con">
        <form action="/m/event/page" style="width: 100%;height: 100%;">
            <input type="hidden" name="type" th:value="${type}"/>
            <input type="hidden" name="id" th:value="${eventId}"/>
            <input type="hidden" name="sectionId" th:value="${sectionId}"/>
            <input placeholder="艺术品名称" name="name" type="text" class="input1" value="" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>


            <div style="clear: both;display: flex; justify-content: space-between; align-items: center;padding-top: 7px;">
                <div style="display: inline;border: 1px solid #ccc;padding: 0px 6px;height: 27px;line-height: 27px;" onclick="quit_search_name()">返 回</div>
                <button type="submit" style="background: #b68036;color: #fff;padding: 3px 6px;">搜 索</button>

            </div>

        </form>
    </div>
</div>
<!--top-->
<div id="top">
    <div th:replace="~{mobile/event/component/header :: event_menu}"></div>
    <div class="muen1" style="right: 56px;"><span class="muenX"></span>
        <span class="muenZ"></span></div>
    <div class="muen"><span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span></div>
</div>
<!--/top-->

<!--main-->
<div class="main">
    <div class="theme_layoutbox_1208765579"
         style="position: relative;width: 100%;height: auto;transform-origin: top left;overflow-x: hidden;">
        <div style="overflow-x: hidden;">
            <img th:src="${eventExhibitionTemp.bannerUrl}" style="width: 100%;height: auto;overflow: hidden">
        </div>
    </div>

    <style>
        #page-content-2 img {
            width: 100% !important;
            height: auto;
        }
    </style>

    <div class="about_bg3">

        <div style="clear: both;height: 0.5rem;">

        </div>
        <div class="encyclopedia-type">

        </div>
        <div class="about_bg3">
            <div class="aboutL">
                <!--<span class="BtnL"></span>-->
                <div class="aboutH">
                    <h3>EVENT EXHIBITION CENTER</h3>
                    <h2 th:each="eventExhibitionSectionTemp, index : ${eventExhibitionSectionTemps}">
                        <span th:if="${eventExhibitionSectionTemp.id.toString() == sectionId.toString()}">[[ ${eventExhibitionSectionTemp.name} ]]</span>
                    </h2>
                </div>


            </div>
            <div style="clear: both;height: 0.5rem;">

            </div>
            <script>
                $(document).ready(function () {
                    // 给 class 为 packUp 的元素绑定点击事件
                    $('#type-control').click(function () {
                        // 切换 id 为 art-type-select 的元素的显示状态
                        $('#art-type-select').toggle();
                        // 根据显示状态修改按钮文本
                        if ($('#art-type-select').is(':visible')) {
                            $(this).text(' 收起▲ ');
                        } else {
                            $(this).text(' 展开▼ ');
                        }
                    });
                });


            </script>
            <div class="encyclopedia-type">
                <div class="type-box">
                    <div class="type-title">
                        <span class="type-class">艺术类型：</span>
                        <span class="packUp" id="type-control"> 收起▲ </span>
                    </div>
                    <div class="type-attribute" id="art-type-select">
                        <div class="type-attribute-box">
                            <div th:class="${type == null||type == 'null'||type == ''}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '">
                                <a th:href="@{/m/event/page(id=${eventId},sectionId=${sectionId})}"> 全部</a></div>
                            <div th:if="${artType.status == 3}"
                                 th:class="${type == artType.id}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '"
                                 class="type-item type-item-art-type" th:each="artType:${artTypes}">
                                <a th:href="@{/m/event/page(id=${eventId},sectionId=${sectionId},type=${artType.id})}">
                                    [[${artType.name}]]
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="type-box">
                    <div class="type-title">
                        <span class="type-class">艺术品名称：</span>
                        <span th:if="${name==null || name ==''}" class="packUp search_name"> 搜索</span>
                        <span th:if="${name!=null && name !=''}" class="packUp">
                          <a th:href="@{/m/event/page(id=${eventId},sectionId=${sectionId},type=${type})}">
                            <span style="margin-right: 10px;">[[${name}]]</span><span style="color: red;">×</span>
                          </a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="product_ul anim anim-1 anim-show">

                <!--列表-->
                <aside class="fall-box grid">
                    <div class="grid-item item" th:each="artwork,index:${artworks}">
                        <a th:href="@{/m/event/artwork/detail(id=${eventId},sectionId=${sectionId},wid=${artwork.id})}"
                           style="display: block;">
                            <img th:src="${artwork.url}" class="item-img" style="border-radius: 7px;"/>
                            <section class="section-p" style="border-top: 1px solid #eee;padding-left: 0px;">
                                <div style="padding-left: 5px;padding-right: 5px; text-align: left; font-size: 12px;">
                                    <span style="text-align: left; float: left;width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> [[ ${artwork.name} ]]</span>
                                    <span style="text-align: left; clear: both;"></span>
                                </div>
                                <div style="padding-left: 5px;text-align: left; font-size: 12px;">作者：[[
                                    ${artwork.artistName} ]]
                                </div>
                                <div style="padding-left: 5px;text-align: left; font-size: 12px;">价格：[[
                                    ${artwork.price ==
                                    null || artwork.price == 0 ? '****' : artwork.price + "元"} ]]
                                </div>
                                <div style="padding-left: 5px;text-align: left; font-size: 12px;">规格：[[
                                    ${artwork.spec}
                                    ]]
                                </div>
                                <div style="padding-left: 5px;text-align: left; font-size: 12px;">编号：[[
                                    ${artwork.artworkNum == null||artwork.artworkNum == 0 ? '****' : artwork.artworkNum
                                    } ]]
                                </div>

                            </section>
                        </a>
                    </div>
                </aside>
                <!--/列表-->
            </div>
            <div class="pages anim anim-3 yema">
                <div>
                    <a class="next"
                       th:href="@{/m/event/page(currentPage=${currentPage - 1},name=${name},type=${type},id=${eventId},sectionId=${sectionId})}"
                       th:if="${currentPage != 1}">
                        &lt;&lt;
                    </a>
                    <div th:each="page:${pages}" style="display: inline;">
                        <span class="current" th:text="${page}" th:if="${currentPage == page}">1</span>
                        <a class="num"
                           th:href="@{/m/event/page(currentPage=${page},name=${name},type=${type},id=${eventId},sectionId=${sectionId})}"
                           th:if="${currentPage != page}" th:text="${page}"></a>
                    </div>
                    <a class="next"
                       th:href="@{/m/event/page(currentPage=${currentPage + 1},name=${name},type=${type},id=${eventId},sectionId=${sectionId})}"
                       th:if="${currentPage != totalPages}">
                        &gt;&gt;
                    </a>
                </div>
            </div>
        </div>

    </div>

</div>

<!--/main-->

<!--/main-->

<!--footer-->
<div th:replace="~{mobile/component/footer :: footer}"></div>
<!--/footer-->

<!--wap-->
<div th:replace="~{mobile/component/footer :: footer_menu}"></div>
<!--/wap-->

<div class="wapBg"></div>
</body>
<script type="text/javascript">
    $('.slider1').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'speed': 1000,
        'pause': 4000,

    })

    $('.sliderHomeSpT').bxSlider({
        'auto': false,
        'controls': true,
        'touchEnabled': true,
        'pager': true,

    })

    var lineW = $(".lineW span").width();
    $('.sliderHomeSpB').bxSlider({
        'auto': false,
        infiniteLoop: true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'slideWidth': '204',
        'minSlides': 2,
        'maxSlides': 5,
        'moveSlides': 5,
        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
            var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
            var lineWW = $(".lineW").width();


            if (newIndex == 0) {
                $(".lineW span").css({
                    "width": lineW + 'px'
                })
            } else {
                $(".lineW span").css({
                    "width": (lineWW / num) * (newIndex + 1) + 'px'
                })
            }

        },


    })

    $('.sliderHomeDzzc').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': false,
        'slideWidth': '280',
        'minSlides': 2,
        'maxSlides': 4,
        'moveSlides': 1,
        'speed': 600,
        //	    'slideMargin': 20
    })


</script>
<script th:src="@{/js/mobile/pb/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/swiper.min.js}"></script>
<script th:src="@{/js/mobile/pb/find.js}"></script>

</html>
